<template>
	<view class="content">
		<view  class="top-bar">
			<view class="top-bar-box">
				<view class="logo">
					<view class="main">花密</view>
					<view class="english">
						<view class="text">Flower</view>
						<view class="text">Password</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content-box">
			<input :class="focusClass" @input="getPassword" @blur="password('blur')" @focus="password('focus')" :value="password_val" name="password" :focus="passwordFocus" id="password" type="password" placeholder="记忆密码"></input>
			<input :class="codeClass" @input="getCode" @focus="code('focus')" :value="code_val" @blur="code('blur')" type="text" :focus="codeFocus" name="code" id="code" placeholder="区分代号"></input>
			<view v-if="showPassword()"  class="operator-box">
				<view class="result-box">
					<input class="result" :value="result"><input><u-icon name="eye" size="48" class="eye"></u-icon>
				</view>
				<u-button @click="copy"  class="copy">复制</u-button>
			</view>
		</view>
		
	</view>
</template>

<script>
	var md5 = require('../../utils/md5.min.js');
	
	// define const conform to flower password
	const STR1 = 'snow';
	const STR2 = 'kise';
	const STR3 = 'sunlovesnow1990090127xykab';
	const BUTTON_VALUE_SHOW = '显示';
	const BUTTON_VALUE_HIDE = '隐藏';

	export default {
		data() {
			return {
				title: 'Hello',
				passwordFocus:true,
				codeFocus:false,
				focusClass:'input',
				codeClass:'input',
				result:"ssss",
				password_val:'',
				code_val:'',
			}
		},
		onLoad() {

		},
		computed:{
			
		},
		methods: {
			copy(e){
				let transfer = document.createElement('input');
				document.body.appendChild(transfer);
				transfer.value = this.result;  // 这里表示想要复制的内容
				transfer.focus();
				transfer.select();
				if (document.execCommand('copy')) {
					document.execCommand('copy');
				}
				transfer.blur();
				console.log('复制成功',transfer.value);
				document.body.removeChild(transfer);
			},
			showPassword(){
				if(this.password_val&&this.code_val){
					// K8029ab67c5403b6 
					// K8029ab67c5403b6
					var keyword = this.password_val;
					var code = this.code_val;
					var md5one = md5(keyword, code);
					var md5two = md5(md5one, STR1);
					var md5three = md5(md5one, STR2);
					var rule = md5three.split('')
					var source = md5two.split('')
					// convert to upper case
					for (var i = 0; i < 32; i++) {
						if (isNaN(source[i])) {
						  if (STR3.search(rule[i]) > -1) {
							source[i] = source[i].toUpperCase();
						  }
						}
					  }
					var pwd32 = source.join('');
					var firstChar = pwd32.slice(0, 1);
					// make sure first char is not a number
					if (isNaN(firstChar)) {
						var pwd = pwd32.slice(0, 16);
					} else {
						var pwd = 'K' + pwd32.slice(1, 16);
					}
					this.result = pwd;
					console.log(this.result);
					return true;
				}else{
					return false;
				}
			},
			password(style){
				this.passwordFocus = true;
				
				this.focusClass = style==='focus'? 'input inputFocus':'input';
			},
			code(style){
				this.codeClass = style==='focus'? 'input inputFocus':'input';
			},
			getPassword(e){
				this.password_val = e.target.value;
			},
			getCode(e){
				this.code_val = e.target.value;
			}

		}
	}
</script>

<style lang="scss" scoped>
	.top-bar{
		max-height: 32vh;
		height: 270px;
		background: #00a8ff url(../../static/top-bar-bg.png) no-repeat 100% center/auto 100%;
	}
	.top-bar-box{
		max-width: 380px;
		min-width: 290px;
		height: 100%;
		margin: 0 auto;
		padding: 0 20px;
		position: relative;
	}
	.logo {
		position: absolute;
		left: 20px;
		bottom: 10px;
		color: #fff;
		display: flex;
		align-items: flex-end;
	}

	.logo .main{
		align-self: flex-end;
		line-height: 1.1;
		font-family: Alibaba-PuHuiTi-Heavy,sans-serif;
		font-size: 60px;
	}
	.logo .english{
		font-family: Alibaba-PuHuiTi-Regular,sans-serif;
		font-size: 22px;
		margin-left: 3px;
		margin-bottom: 2px;
		opacity: .5;
	}
	.content-box{
		margin: 0 auto;
		max-width: 380px;
		min-width: 290px;
		padding: 40px 20px 20px;
		.input{
			font-family: Monaco,PingFang SC,Lantinghei SC,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif;
			font-weight: 400;
			color: #666;
			width: 95%;
			padding: 10px;
			border: 2px solid #ebf0f5;
			background-color: #ebf0f5;
			margin: 0 0 24px;
			border-radius: 4px;
			outline: none;
			-webkit-appearance: none;
		}
		.inputFocus{
				border: 2px solid #77d1ff;
		}
	}
	.operator-box{
		position: relative;
		.result-box{
			display: inline-block;
			position: relative;
			width: 70%;
		}
		.result{
			height: 28px;
			padding: 10px 0 10px 10px;
			width: 100%;
			background-color: #ebf0f5;
			border-radius: 4px;
			position: relative;
		}
		.eye{
			position: absolute;
			right: 0;
			bottom: 50%;
		}
		.copy{
			background-color: #00a8ff;
			color: #fff;
			height: 48px;
			width: 88px;
			padding: 10px 0;
			position: absolute;
			right: 0;
			top: 0;
			border-radius: 0 4px 4px 0;
			cursor: pointer;
		}
	}
	
</style>
